<template>
  <view>
    <view class="body">
      <InfoTitleList :infoTitleList="health1"></InfoTitleList>
      <StepsComponent :steps-data="stepsData" />
    </view>
  </view>
</template>

<script setup>
import Header from '@/components/AppHeader/Header.vue';
import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
import StepsComponent from '@/components/Livestock/StepsComponent.vue';
import { getQuarantineInfo } from '@/api/traceability';
import { ref, onMounted } from 'vue';

// 获取 Storage 中的 F_Id
const getFIdFromStorage = () => {
  const fId = uni.getStorageSync('F_Id');
  console.log('从 Storage 获取的 F_Id:', fId);
  return fId || null;
};

const stepsData = ref([]); // 定义为响应式数据

// 处理图片路径的函数
const formatImagePath = (path) => {
  // 默认图片路径
  const defaultImage = '/static/cow/test.png';

  // 如果路径为空，直接返回空字符串，不显示图片
  if (!path || path.trim() === '') {
    console.log('图片路径为空，不显示图片');
    return '';
  }

  // 检查是否为本地路径
  if (path.startsWith('/file/local')) {
    console.warn('检测到本地路径，使用默认图片:', path);
    return defaultImage;
  }

  // 检查是否包含 blob URL
  if (path.includes('blob:http://localhost:5173/')) {
    console.warn('检测到 blob URL，使用默认图片:', path);
    return defaultImage;
  }

  // 检查是否为 <url> 标签格式且包含有效的 HTTP URL
  if (path.startsWith('<url') && path.includes('http://')) {
    // 提取 URL 部分
    const urlMatch = path.match(/http:[^>]+/);
    if (urlMatch && urlMatch[0]) {
      return urlMatch[0];
    }
    console.warn('无法提取 URL 部分:', path);
    return defaultImage;
  }

  // 检查是否已经有 .png 后缀
  if (!path.endsWith('.png') && !path.includes('://')) {
    // 尝试添加 .png 后缀（仅适用于相对路径）
    const newPath = path + '.png';
    console.warn('自动添加 .png 后缀:', newPath);
    return newPath;
  }

  // 如果路径格式正常，直接返回
  return path;
};

const fetchQuarantineInfo = async () => {
  const fId = getFIdFromStorage();
  if (!fId) {
    console.error('F_Id 不存在，无法获取检疫信息');
    return;
  }

  try {
    // 调用接口获取数据
    const response = await getQuarantineInfo({ id: fId });
    console.log('获取到的检疫信息:', response);

    if (response.code === 200) {
      // 映射后端数据到页面组件所需格式
      stepsData.value = response.data.map(item => {
        return {
          title: new Date(item.F_StTime).toLocaleDateString(), // 格式化日期
          title1: '检疫单位', content1: item.F_Stand,
          title2: '检疫类型', content2: item.F_Title,
          title3: '检疫人员', content3: item.F_UserName,
          img: formatImagePath(item.F_ResultImage) // 处理图片路径
        };
      });
    } else {
      console.error('获取检疫信息失败:', response.msg);
    }
  } catch (error) {
    console.error('获取检疫信息时发生错误:', error);
  }
};

const health1 = [
  {
    title: '检疫信息'
  }
];

onMounted(() => {
  fetchQuarantineInfo();
})
</script>

<style scoped lang="scss">
</style>